<template>
    <!-- 标签盒子 -->
    <div class="tag-box">
        <div class="header">
            <div
                class="tags"
                :style="{ 'max-height': isFolded ? '2.8rem' : 'none' }"
            >
                <div
                    v-for="(tag, index) in contentList"
                    :key="index"
                    class="tag"
                    @click="goArticleList(tag)"
                >
                    {{ tag.name }}
                </div>
            </div>
            <!--      <div v-if="hasFoldButton" class="foldButton" @click="toggleFoldState">-->
            <!--        &lt;!&ndash; 插入你的SVG路径或其他SVG内容 &ndash;&gt;-->
            <!--        <img-icon name="up_fold" size="2rem" v-if="isFolded" />-->
            <!--        <img-icon name="down_unfold" size="2rem" v-else />-->
            <!--      </div>-->
        </div>
    </div>
</template>

<script>
import ImgIcon from "./ImgIcon.vue";

export default {
    name: "tag-box",
    components: { ImgIcon },
    props: ["contentList"],
    data() {
        return {
            isFolded: false,
        };
    },
    computed: {
        hasFoldButton() {
            return this.contentList.length > 0;
        },
    },
    methods: {
        goArticleList(item) {
            // 文章列表
            this.$router.push({
                path: `article-list/${item.id}/${item.name}`,
            });
        },
        toggleFoldState() {
            this.isFolded = !this.isFolded;
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/tag-box.scss";
</style>
